<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		
		<view class="bank-box">
			<view class="top-text"><u-icon name="integral" label="请转账到以下账户" size="20"></u-icon></view>
			
			<view class="bank-item" :class="bank_item.color" v-if="bank_item.id!=undefined">
				<view class="bank-top">
					<view>{{bank_item.bank_realname}}</view>
					<view><u-tag :text="bank_item.bank_name" plain size="medium" color="#FFFFFF" borderColor="#FFFFFF"></u-tag></view>
				</view>
				<view class="number">{{bank_item.bank_number}}</view>
				<view>{{bank_item.branch_name}}</view>
				<view class="bank-bottom2">
					<view @click="copyNumer()">
						<u-icon name="edit-pen" size="20" label="复制卡号" color="#FFFFFF" labelColor="#FFFFFF"></u-icon>
					</view>
					<view @click="bank_pop=true">
						<u-icon name="list-dot" size="20" label="切换银行卡" color="#FFFFFF" labelColor="#FFFFFF"></u-icon>
					</view>	
				</view>	
			</view>
			
			<view class="no-select-bank" @click="bank_pop=true" v-if="bank_item.id===undefined">
				请选择转账的银行卡号
			</view>
			
			<view class="payment">
				<view class="pay-sn">
					<view><u-icon name="integral" :label="'支付编号:'+payment_sn" size="20"></u-icon></view>
					<view @click="copySn()">复制</view>
				</view>
				<view class="waring-tips">转账时请在备注处，填写该支付编号！</view>
			</view>
			
			<view class="upload-img">
				<view class="title">转账凭证</view>
				<my-imgUpload @upChange="upChange" :maxCount="20"></my-imgUpload>
			</view>
		</view>
		<view class="submit-box">
			<button class="my-but-primary" @click="submit()">确定提交</button>
		</view>
		
		<u-popup :show="bank_pop" @close="bank_pop=false" :closeable="true">
			<scroll-view class="bank-list" :scroll-y="true">
				<view class="bank-item" :class="item.color" v-for="(item,index) in bank_list" :key="index" @click="selectBank(index)">
					<view class="bank-top">
						<view>开户名：{{item.bank_realname}}</view>
						<view><u-tag :text="item.bank_name" plain size="medium" color="#FFFFFF" borderColor="#FFFFFF"></u-tag></view>
					</view>
					<view class="number">{{item.bank_number}}</view>
					<view class="bank-bottom">
						<view>{{item.branch_name}}</view>
						<block v-if="index===select_index">
							<u-icon name="checkmark-circle-fill" size="30" color="#FFFFFF"></u-icon>
						</block>
						<block v-else>
							<my-icon name="no-select" size="30"></my-icon>
						</block>
					</view>					
				</view>
			</scroll-view>
		</u-popup>
		
	</view>
</template>

<script>
	import $file from "@/common/file"
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'线下转账',
				order:{},
				payment_sn:'',
				bank_list:[],				//银行列表
				select_index:-1,			//当前选中银行序号
				bank_item:{},				//当前选中的银行信息
				post_data:{					//提交的数据
					order_id:0,
					bank_id:0,
					pay_id:0,
					payments_images:""	
				},
				file_list1:[],
				bank_pop:false,
			}
		},
		onLoad(option){
			this.post_data.order_id=option.id
			this.post_data.pay_id=option.pid
			this.payment_sn=option.psn
			this.initData()
		},
		onShow(){
		},
		methods: {
			initData(){
				this.$u.api.orderInfo({order_id:this.post_data.order_id}).then(orderRes=>{
					this.$u.api.bankList().then(res=>{
						let list=res.data
						list.forEach(item=>{
							switch(item.bank_name){
								case "工商银行" || "中国工商银行":
									item['color']='bg-red'
									break
								case "中国银行":
									item['color']='bg-red'
									break
								case "广发银行":
									item['color']='bg-red'
									break
								case "招商银行":
									item['color']='bg-red'
									break
								case "建设银行" || "中国建设银行":
									item['color']='bg-blue'
									break
								case "交通银行" || "中国交通银行":
									item['color']='bg-blue'
									break
								case "民生银行" || "中国民生银行":
									item['color']='bg-blue'
									break
								case "农业银行" || "中国农业银行":
									item['color']='bg-green'
									break
								case "邮政银行" || "中国邮政储蓄银行":
									item['color']='bg-green'
									break
								case "平安银行" || "中国平安":
									item['color']='bg-orange'
									break
								default:
									item['color']=''
									break
							}
							return item
						})
						this.bank_list=list
					})
				}).catch(data=>{
					//别人的订单，或者订单不存在
					if(data.errno===1){
						this.$c.a('index/index')
					}
				})
			},
			// 图片发生变化
			upChange(data){
				this.post_data.payments_images=data.img
			},
			// 复制支付编号
			copySn(){
				let than=this
				uni.setClipboardData({
					data: this.payment_sn,
					showToast:false,
					success: function () {
						uni.hideToast()
						than.$c.tips('复制成功！')
					}
				});
			},
			//复制银行卡号
			copyNumer(){
				let than=this
				uni.setClipboardData({
					data: this.bank_item.bank_number,
					showToast:false,
					success: function () {
						uni.hideToast()
						than.$c.tips('银行卡号已复制成功')
					}
				});
			},
			// 选中当前银行卡
			selectBank(i){
				this.select_index=i
				this.post_data.bank_id=this.bank_list[i].id
				this.bank_item=this.bank_list[i]
				this.bank_pop=false
			},
			// 提交凭证
			submit(){
				if(this.post_data.bank_id===0){
					this.$c.error('请选择转账的银行卡号')
					return false
				}
				
				if(this.post_data.payments_images===""){
					this.$c.error('请上传转账凭证')
					return false
				}
				this.$u.api.financePay(this.post_data).then(res=>{
					this.$c.success(res.data,'order/detail/index?id='+this.post_data.order_id,4)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.bank-box{
		font-size: 26rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.top-text{
		padding: 20rpx;
	}
	.bank-list{
		height:calc(100vh - 400rpx);
		margin-top: 80rpx;
	}
	.bank-list .bank-item{
		margin: 30rpx;
	}
	.bank-item{
		line-height: 60rpx;
		font-size: 28rpx;
		padding: 30rpx;
		border: 1rpx solid $u-border-color;
		border-radius: 20rpx;
		background-color:$u-primary;
		background: linear-gradient(to right,#D9AC75,#BB8652);
		color:#FFFFFF;
		margin-bottom: 30rpx;
	}
	.bg-red{
		background: linear-gradient(to right,#FE6E66,#FD5562);
	}
	.bg-green{
		background: linear-gradient(to right,#01ABA2,#028EA9);
	}
	.bg-blue{
		background: linear-gradient(to right,#2E85D4,#2E69CF);
	}
	.bg-orange{
		background: linear-gradient(to right,#ED9A55,#EC6C00);
	}
	.bank-item .number{
		font-size: 38rpx;
		font-weight: 700;
		letter-spacing: 2rpx;
	}
	.bank-item .bank-top,.bank-item .bank-bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bank-item .bank-bottom2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #FFFFFF;
		margin-top: 10rpx;
		padding-top: 20rpx;
	}
	.upload-img{
		padding: 20rpx;
	}
	.upload-img .title{
		color: $u-tips-color;
		margin-bottom: 20rpx;
	}
	.payment{
		padding: 20rpx;
	}
	.payment .pay-sn{
		display: flex;
		justify-content: space-between;
	}
	.waring-tips{
		color: $u-error;
	}
	.submit-box{
		padding: 30rpx;
	}
	.no-select-bank{
		padding: 40rpx 30rpx;
		border: 2rpx dotted $u-border-color;
		text-align: center;
		border-radius: 20rpx;
		background-color: #F6f6f6;
		margin: 20rpx auto;
	}
</style>
